<template>
  <div>
    <div>
      <div>
        <span>活动编号:</span>
        <i-input v-model="actSn" placeholder="请先输入后动活动编号，再查询" style="width: 200px;"/>
        <Button type="primary" @click="toRefresh">查询</Button>
        <div style="font-weight: 800;font-size: 16px;">数据总览&nbsp;
          <Icon type="information-circled"></Icon>
        </div>
      </div>
      <br/>
    </div>
    <div>
      <div ref="myChart" style="width: 100%;height: 440px">
      </div>
    </div>
  </div>
</template>
<script type="javascript">
  var echarts = require('echarts');
  import axios from 'axios'

  export default {
    data() {
      return {
        actSn:null,
        data:[],
      }
    },
    methods: {
      //刷新报表数据
      toRefresh() {
        this.getBoardData();
      },
      getBoardData() {
        if(this.actSn===""||this.actSn===null){
          this.$Message.error({content:"活动代码不能为空!"});
          return;
        }
        axios.post("/activities/findActivityCount", {actSn: this.actSn}).then(response => {
          let body = response.body;
          let a = [];
          a.push(body["onlineCount"]);
          a.push(body["allCustomer"]);
          a.push(body["allRequestTimes"]);
          a.push(body["allOrderSuccess"]);
          a.push(body["allOrderFail"]);
          a.push(body["allOrderError"]);
          a.push(body["allUnPay"]);
          a.push(body["payIngCount"]);
          a.push(body["paySuccessCount"]);
          this.data = a;
          this.renderChart();
        }).catch(response => {
          console.log(response);
        })
      },
      renderChart() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(this.$refs.myChart);
        // 绘制图表
        myChart.setOption({
          color: ['#36db15'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['在线人数', '总参与人数', '总点击数', '下单成功总数', '抢购失败总数',
                '不满足抢购条件失败总数',"未支付订单数","支付中数量","支付成功数量"],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '人气',
              type: 'bar',
              barWidth: '60%',
              data: this.data
            }
          ]
        });
      }

    },
    created() {

    },
    mounted() {
    }
  }
</script>
<style>
  .ivu-date-picker-editor {
    margin-top: 16px;
  }

  .cardFloat {
    width: 20%;
    float: left
  }

  .card-total-number {
    font-size: 26px;
    color: #0099CC;
    font-weight: 400
  }

  .card-first-title {
    font-size: 13px;
    font-weight: 600
  }

  .card-second-title {
    font-size: 12px;
    font-weight: 600;
  }

</style>
